import React, { Component, lazy } from 'react'
// Suspense 悬念
import { Switch, Route, Redirect } from 'react-router-dom'

// 引入组件的额方式换成了懒加载的
const Page1 = lazy(()=> import('../pages/Page1'))
const Page2 = lazy(()=> import('../pages/Page2'))
const Page3 = lazy(()=> import('../pages/Page3'))
const Index = lazy(()=> import('../pages/Index'))
const Xhr = lazy(()=> import('../pages/Xhr'))
const Redux = lazy(()=> import('../pages/Redux'))
const Redux2 = lazy(()=> import('../pages/Redux2'))
const Hook = lazy(()=> import('../pages/hook'))
const ClassTitle = lazy(()=> import('../pages/ClassTitle'))
const FnTitle = lazy(()=> import('../pages/FnTitle'))
const FnGrand = lazy(()=> import('../pages/FnGrand'))
const FnReducer = lazy(()=> import('../pages/FnReducer'))

export class Router extends Component {
    constructor() {
        super();
        this.state = {
            routes: [
                { path: '/page1', component: Page1, needLogin: false, title: 'page1' },
                { path: '/page2', component: Page2, needLogin: true },
                { path: '/page3', component: Page3, needLogin: true },
                { path: '/index', component: Index, needLogin: false },
                { path: '/xhr', component: Xhr, needLogin: false },
                { path: '/redux', exact: true, component: Redux, needLogin: false },
                { path: '/redux2', exact: true, component: Redux2, needLogin: false },
                { path: '/hook', exact: true, component: Hook, needLogin: false },
                { path: '/classtitle', exact: true, component: ClassTitle, needLogin: false },
                { path: '/fntitle', exact: true, component: FnTitle, needLogin: false },
                { path: '/fngrand', exact: true, component: FnGrand, needLogin: false },
                { path: '/fnreducer', exact: true, component: FnReducer, needLogin: false },
            ]
        }
    }
    render() {
        return (
            // fallback 后备 预备队
            <React.Suspense fallback={<h1><mark>loading...</mark></h1>}>
                <Switch>
                    {
                        this.state.routes.map((item, index) => {
                            return (
                                <Route key={index} path={item.path} exact={item.exact} render={() => {
                                    document.title = item.title || 'React';
                                    // 先判断页面是否要求登录
                                    if (item.needLogin) {
                                        // 页面需要登录 接下来判断用户是否登录
                                        // 用户的登录 通过本地存储模拟
                                        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
                                        if (userInfo) {
                                            return (
                                                <item.component />
                                            )
                                        } else {
                                            // 页面需要登录 用户未登录
                                            return <Redirect to="/index"></Redirect>
                                        }
                                    } else {
                                        return (
                                            <item.component />
                                        )
                                    }

                                }}></Route>
                            )
                        })
                    }
                </Switch>
            </React.Suspense>
        )
    }
}

export default Router